import React, { useState } from 'react';
import { Input, Button, List, Empty, Card } from 'antd';
import { SearchOutlined } from '@ant-design/icons';
import { useNavigate } from 'react-router-dom';
import '../../css/Search.css';

const { Search: AntdSearch } = Input;

interface SearchResultItem {
  id: number;
  title: string;
  description: string;
  url: string;
}

const Search: React.FC = () => {
  const navigate = useNavigate();
  const [query, setQuery] = useState<string>('');
  const [results, setResults] = useState<SearchResultItem[]>([]);
  const [isLoading, setIsLoading] = useState<boolean>(false);

  const handleSearch = (value: string) => {
    if (!value.trim()) {
      return;
    }

    setIsLoading(true);
    setQuery(value);

    // 模拟API请求
    setTimeout(() => {
      const mockResults: SearchResultItem[] = [
        {
          id: 1,
          title: '产品中心',
          description: '了解我们的产品线和服务内容',
          url: '/services',
        },
        {
          id: 2,
          title: '关于我们',
          description: '了解KAIZELI公司的历史和团队',
          url: '/about',
        },
        {
          id: 3,
          title: '最新新闻',
          description: '查看公司最新动态和行业资讯',
          url: '/news',
        },
        {
          id: 4,
          title: '联系我们',
          description: '获取我们的联系方式和办公地址',
          url: '/contact',
        },
      ].filter(
        (item) =>
          item.title.toLowerCase().includes(value.toLowerCase()) ||
          item.description.toLowerCase().includes(value.toLowerCase())
      );

      setResults(mockResults);
      setIsLoading(false);
    }, 800);
  };

  const handleResultClick = (url: string) => {
    navigate(url);
  };

  return (
    <div className="search-page">
      <Card className="search-container">
        <h1 className="search-title">搜索</h1>

        <AntdSearch
          placeholder="请输入搜索关键词"
          enterButton={
            <Button type="primary" icon={<SearchOutlined />}>
              搜索
            </Button>
          }
          size="large"
          value={query}
          onChange={(e) => setQuery(e.target.value)}
          onSearch={handleSearch}
          loading={isLoading}
          className="search-input"
        />

        <div className="search-results">
          {results.length > 0 ? (
            <List
              itemLayout="horizontal"
              dataSource={results}
              renderItem={(item) => (
                <List.Item
                  onClick={() => handleResultClick(item.url)}
                  className="result-item"
                >
                  <List.Item.Meta
                    title={<span className="result-title">{item.title}</span>}
                    description={
                      <span className="result-desc">{item.description}</span>
                    }
                  />
                </List.Item>
              )}
            />
          ) : (
            <Empty
              description={query ? '没有找到相关结果' : '请输入搜索关键词'}
              className="empty-placeholder"
            />
          )}
        </div>
      </Card>
    </div>
  );
};

export default Search;